<template>
	<div>
		<el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header" >
          <vxe-toolbar>
          <template #buttons>
            <vxe-button icon='vxe-icon--plus' status="primary" @click="insertEvent">新增</vxe-button>
            <vxe-button icon="fa fa-trash-o" status="warning" @click="$refs.xTable.removeCheckboxRow()">删除选中项</vxe-button>
            <vxe-button icon="fa fa-save" status="success" @click="saveEvent">保存</vxe-button>
          </template>
        </vxe-toolbar>
        </div>
      </template>

      <vxe-table
        border
        show-overflow
        ref="xTable"
        height="190"
        :span-method="rowspanMethod"
        :data="tableData"
        :edit-rules="demo1.validRules"
        :edit-config="{trigger: 'click', mode: 'cell'}">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="role" title="一级指标" :edit-render="{name: 'input', props: {placeholder: '请输入一级指标'}}"></vxe-table-column>
         <vxe-table-column field="name" title="二级指标" :edit-render="{name: 'input', props: {placeholder: '请输入二级指标'}}"></vxe-table-column>
         <vxe-table-column field="power2" title="权重" :edit-render="{name: 'input', props: {placeholder: '请输入权重'}}"></vxe-table-column>
        <vxe-table-column field="standard" title="考核标准" :edit-render="{name: 'input', props: {placeholder: '请输入地址'}}"></vxe-table-column>
        <vxe-table-column field="goals" title="得分"></vxe-table-column>
      </vxe-table>
    </el-card>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table'

export default defineComponent({
  setup () {
    const xTable = ref({} as VxeTableInstance)

    const tableData = ref([
      { id: 10001, name: '需求文档结构清晰、要素完整、便于理解', nickname: 'T1', role: '单位开发周期工作质量', power1: '0.5', power2: '0.5', sex: '0', sex2: ['0'], num1: 40, age: 28, standard: '群众测评', date12: '', date13: '',goals:'' },
      { id: 10002, name: '单位开发周期模块开发质量', nickname: 'T2', role: '单位开发周期工作质量', power1: '0.5', power2: '0.5', sex: '1', sex2: ['0', '1'], num1: 20, age: 22, standard: '群众测评', date12: '', date13: '2020-08-20',goals:'' },
      { id: 10003, name: '配合技术人员理解需求主动性', nickname: 'T3', role: '单位开发周期工作质量', power1: '0.5', power2: '1', sex: '0', sex2: ['1'], num1: 200, age: 32, standard: '群众测评', date12: '2020-09-10', date13: '' ,goals:''},
    ])

    const demo1 = reactive({
      validRules: {
        role: [
          { required: true, message: '一级指标必须填写' }
        ],
        name: [
          { required: true, message: '二级指标必须填写' }
        ],
        standard: [
          { required: true, message: '考核标准必须填写' }
        ]
      }
    })

    const insertEvent = async () => {
      const $table = xTable.value
      const record = {}
      const { row: newRow } = await $table.insert(record)
      $table.setActiveCell(newRow, 'role')
    }

    const saveEvent = () => {
      const $table = xTable.value
      const body = $table.getRecordset()
      const { insertRecords, removeRecords, updateRecords } = body
      if (insertRecords.length || removeRecords.length || updateRecords.length) {
        $table.validate((errMap) => {
          if (errMap) {
            VXETable.modal.message({ status: 'error', message: '校验不通过！' })
          } else {
            VXETable.modal.message({ message: '保存成功！', status: 'success' })
          }
        })
      } else {
        VXETable.modal.message({ message: '数据未改动！', status: 'warning' })
      }
    }

    // 通用行合并函数（将相同多列数据合并为一行）
    const rowspanMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
      const fields = ['role']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }

    return {
      demo1,
      xTable,
      tableData,
      insertEvent,
      saveEvent,
      rowspanMethod,
    }
  }
});
</script>
<style lang="scss" scoped>
</style>